<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <div id="demo"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom, 用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel, 用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel"> /* 此处一定要写babel */
        //1. 创建虚拟DOM
        const VDOM = (
            <h1 id="title">
                <span>Hello,React</span>
            </h1>
        )

        const TDOM = document.getElementById('demo');
        //2. 渲染虚拟DOM页面
        ReactDOM.render(VDOM,document.getElementById('test'));
        console.log('虚拟DOM',VDOM);
        console.log('真实DOM',TDOM);
        // debugger
        /*
            关于虚拟DOM：
            1. 本质是Object类型的对象（一般对象）
            2. 虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部作用，无需真实DOM上那么多的属性。
            3. 虚拟DOM最终会被React转化为真实DOM，呈现在页面上。
        */
    </script>
</body>
</html>